<template>
    <div class="box">
        <div class="navbar">
            <el-button type="primary">
                <RouterLink to="/register">注册</RouterLink>
            </el-button>
            <el-button type="primary">
                <RouterLink to="/login">登录</RouterLink>
            </el-button>
        </div>

        <div class="index-header">

            <div class="index-header-left">
                <img src="https://codelover.club/files/stutasks/userID_864/currNo_43/222/Fun9V6Gm8IyWG24uTyzlhrtAnjcf.jpg"
                    alt="" style=" width: 200px;height: 300px;">
            </div>

            <div class="index-header-right">
                <Carousel :slides="carouselSlides" />
            </div>

        </div>

        <div class="index-middle">

            <bar></bar>

        </div>
        <div class="index-footer">
            <div class="index-footer-title">
                <h1>更多</h1>
            </div>
            <div class="show">
                <Card v-for="image in images" :key="image.id" :image="image" />
            </div>
        </div>

        <bottom></bottom>

    </div>
</template>

<script setup lang="ts">
import Carousel from './Carousel.vue';
import bar from './bar.vue';
import Card from './Card.vue';
import bottom from './bottom.vue';

import { ref } from 'vue';
import NewNav from './NewNav.vue';



const carouselSlides = ref([
    { image: 'https://codelover.club/files/stutasks/userID_864/currNo_43/222/Fqjxv-1ZPNguzVmAmyDz7T_yiKwr.jpg', alt: '落日' },
    { image: 'https://codelover.club/files/stutasks/userID_864/currNo_43/222/Fu5ldbrDeRpOlWq-4hZDQP1Yfm0U.jpg', alt: '图书馆' },
    { image: 'https://codelover.club/files/stutasks/userID_864/currNo_43/222/FumKGeGNHU4rmm7iUxhzPOQI4vwK.jpg', alt: '雾雨天' },
    // 继续添加图片数据
]);


// 图片数组
const images = [
    { id: 1, src: 'https://codelover.club/icons/course/icon1.svg', title: '简介：软件测试技术', tags: ['江导', '2024-4-23 8:00~2024-7-10 18:00'] },
    { id: 2, src: 'https://codelover.club/icons/course/icon2.svg', title: '简介:程序设计', tags: ['罗勇胜', '2024-4-23 8:00~2024-7-10 18:00'] },
    { id: 3, src: 'https://codelover.club/icons/course/icon3.svg', title: '简介：数据库高级应用', tags: ['李俊', '2024-4-23 8:00~2024-7-10 18:00'] },
    { id: 4, src: 'https://codelover.club/icons/course/icon4.svg', title: '简介：后端技术与项目开发', tags: ['江导', '2024-4-23 8:00~2024-7-10 18:00'] },
    { id: 5, src: 'https://codelover.club/icons/course/icon5.svg', title: '简介:24春季进销存系统', tags: ['罗勇胜', '2024-4-11 8:00~2024-7-31 18:00'] },
    { id: 6, src: 'https://codelover.club/icons/course/icon6.svg', title: '简介：网页设计', tags: ['罗勇胜', '2024-4-10 8:00~2024-5-11 18:00'] },
    { id: 7, src: 'https://codelover.club/icons/course/icon7.svg', title: '简介：前后端分离项目实战', tags: ['刁建忠', '2024-3-3 8:00~2024-3-31 18:00'] },
    { id: 8, src: 'https://codelover.club/icons/course/icon3.svg', title: '简介:2024专业技能综合实践', tags: ['刁建忠', '2024-2-21 8:00~2024-7-20 18:00'] },
    { id: 9, src: 'https://codelover.club/icons/course/icon6.svg', title: '简介：前端框架应用项目开发', tags: ['刁建忠', '2024-2-21 8:00~2024-7-19 18:00'] },
    { id: 10, src: 'https://codelover.club/icons/course/icon7.svg', title: '简介:Web前端开发技术', tags: ['刁建忠', '2024-2-21 8:00~2024-7-20 18:00'] },
    { id: 11, src: 'https://codelover.club/icons/course/icon5.svg', title: '简介:2024毕设与顶岗实习', tags: ['刁建忠', '2024-1-6 8:00~2024-7-29 18:00'] },
];



</script>

<style scoped>
.box {
    display: flex;
}

.navbar {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    /* justify-content: flex-end; */
    align-items: center;
    height: 60px;
    background-color: #f2f2f2;
    z-index: 999;
    justify-content: center;

    .el-button a {
        color: #f2f2f2;
    }
}


.index-header {
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 1000px;
    height: 220px;
    margin-left: 20px;
    margin-top: -140px;
}

.index-header-left {
    width: 500px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: -137px;
    margin-top: -25px;
}

.index-header-left img {
    width: 100%;
    height: 100%;
    /* object-fit: cover;来确保图片填充整个容器并保持其纵横比。 */
    object-fit: cover;
}

.index-header-right {
    width: 700px;
    height: 150px;
    margin-top: -100px;
}

.index-middle {
    position: relative;
    top: 0%;
    top: 400px;
    margin-right: 300px;
    /* margin-top: 100px; */
    /* 确保bar组件不会顶上去 */
}


.index-footer {
    bottom: 0;
    /* 设置为0，位于视口底部 */
    position: absolute;
    width: 80%;
    /* bottom: 500px; */
    top: 1400px;
    /* 将底部位置向下移动10像素 */
    display: flex;
    /* flex-wrap: wrap; */
    white-space: normal;

    /* 设置为normal，内容会自动换行 */
    .index-footer-title {
        margin-top: -100px;
    }

    .show {
        display: flex;
        flex-wrap: wrap;
    }

}
</style>